<template>
  <!-- 大屏通用下拉选择框 -->
  <div class="screenSelectToolPage">
    <el-select
      class="selectTool"
      :style="{ width: getWidth + 'px' }"
      v-model="selectVal"
      :suffix-icon="IconDropDown"
      placeholder="请选择"
      popper-class="screen-select-popper-style"
      @change="selectChange"
      :clearable="clearable">
      <el-option
        v-for="item in optionsArr"
        :key="item.value"
        :label="item.label"
        :value="item.value" />
    </el-select>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElSelect, ElOption } from "element-plus";
import IconDropDown from "./SelectToolBtnImg.vue";

const props = defineProps({
  getWidth: {
    type: String,
    default: "119",
  },
  // 各选项数据
  optionsArr: {
    type: Array,
    required: true,
    default: () => [],
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  modelValue: String,
});

const selectVal = ref(props.modelValue);
// const IconDropDown = ref('<img src="@/assets/screenImg/commonImg/下拉按钮.png" alt="" />')
// 定义向父组件传值方法
const emits = defineEmits(["update:modelValue", "postSelectVal"]);

const selectChange = (val) => {
  emits("update:modelValue", val);
  emits("postSelectVal", val);
};

defineExpose({
  selectVal,
});
</script>

<style lang="scss">
.screenSelectToolPage {
  .selectTool {
    background: url("@/assets/screenImg/commonImg/下拉选择背景.png") no-repeat;
    background-size: 100% 100%;

    .select-trigger {
      .el-input {
        height: 28px;

        .el-input__wrapper.is-focus {
          box-shadow: 0 0 0 0.00521rem #4092f7 inset !important;
        }

        .el-input__wrapper {
          background-color: transparent;
          box-shadow: none;

          .el-input__inner {
            text-align: center;
            color: rgba(187, 209, 227, 0.73);
          }

          .el-input__inner::placeholder {
            color: rgba(187, 209, 227, 0.73);
          }

          .el-select__icon {
            color: #56caff !important;
          }
        }
      }
    }
  }

  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 0.00521rem #4092f7 inset !important;
  }
}

.screen-select-popper-style {
  .el-select-dropdown {
    background: rgba(21, 43, 94, 0.3);

    .el-select-dropdown__item {
      background-color: transparent;
      color: #4092f7;
    }

    .el-select-dropdown__item.hover {
      color: #36e3e3 !important;
      background-color: transparent;
    }

    .el-select-dropdown__item.selected {
      color: #4092f7;
    }
  }

  .el-popper__arrow::before {
    border: 0.2px solid #4092f7 !important;
    background-color: #4092f7 !important;
  }
}

.screen-select-popper-style.is-light {
  border: none;
  background-color: rgba(7, 14, 24, 0.9);
}
</style>
